<template>
  <div class="box-shadow">
    <!-- 表格 -->
    <div class="table" style="border-top: 0">
      <div>
        <div class="mb-10 info-box">
          <div class="info-titlt">{{ $t("全局配置") }}</div>
          <div class="info-border"></div>
        </div>
        <div class="info-label">{{ $t("机器人部署全局配置导入") + "：" }}</div>
        <ZipFileUpload
          class="upload-demo"
          style="display: inline-block"
          :uploadFileUrl="uploadFileUrl"
          :fileType="fileTypeList"
          :isShowTip="false"
          :fileSize="1024"
          @input="uploadSuccess"
        >
        </ZipFileUpload>
        <!-- <el-row>
          <el-col :span="3">{{ $t("机器人部署全局配置导入") }}</el-col>
          <el-col :span="12">
            <ZipFileUpload
              class="upload-demo"
              :uploadFileUrl="uploadFileUrl"
              :fileType="fileTypeList"
              :isShowTip="false"
              :fileSize="1024"
              @input="uploadSuccess"
            >
            </ZipFileUpload>
          </el-col>
        </el-row> -->
      </div>
      <div class="mt-18">
        <div class="mb-10 info-box">
          <div class="info-titlt">{{ $t("算法评估") }}</div>
          <div class="info-border"></div>
        </div>
        <div style="margin-left: 98px">
          <div class="info-label">{{ $t("导出时段") + "：" }}</div>
          <el-date-picker
            style="width: 180px"
            v-model="startTime"
            type="date"
            :placeholder="$t('开始时间')"
            size="medium"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
          <span
            class="ml-2 mr-2"
            style="
              color: #a6acb1;
              display: inline-block;
              height: 36px;
              line-height: 36px;
            "
          >
            -</span
          >
          <el-date-picker
            style="width: 180px"
            v-model="endTime"
            type="date"
            :placeholder="$t('结束时间')"
            size="medium"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 70px" class="mt-12">
          <div class="info-label" style="vertical-align: top">
            {{ $t("巡检任务范围") + "：" }}
          </div>
          <div class="taskRange">
            <el-checkbox
              class="mb-4 info-label"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >{{ $t("全选") }}</el-checkbox
            >
            <el-checkbox-group v-model="checkedTask">
              <el-checkbox
                class="mt-5 ml-10 info-label"
                style="display: block"
                v-for="item in taskData"
                :label="item.value"
                :key="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <div style="margin-left: 18px" class="mt-12">
          <div class="info-label">{{ $t("巡检点部署巡检图片") + "：" }}</div>
          <div
            style="display: inline-block"
            class="serch-btn"
            @click="exportData"
          >
            {{ $t("导出") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ZipFileUpload from "@/components/ZipFileUpload/index.vue";
import { getTaskList, exportRecogniseZip } from "@/api/deploy/setting";
import moment from "moment";
export default {
  name: "",
  components: {
    ZipFileUpload,
  },
  props: {},
  data() {
    return {
      uploadFileUrl:
        process.env.VUE_APP_BASE_API +
        "/deploy.viewpoint/viewpoint.info.import", // 上传的图片服务器地址
      fileTypeList: ["zip"], //支持的上传类型
      exportDate: "",
      startTime: moment(new Date()).format("YYYY-MM-DD"),
      endTime: moment(new Date().valueOf() + 518400000).format("YYYY-MM-DD"),
      checkAll: false,
      isIndeterminate: true,
      checkedTask: [],
      taskData: [],
      taskIdArr: [], //所有任务的id数组
      startValue: new Date(), //开始时间时间戳
      endValue: new Date().valueOf() + 518400000, //结束时间时间戳
    };
  },
  mounted() {
    this.getTaskData();
  },
  methods: {
    uploadSuccess() {
      this.$store
        .dispatch("GetGlobalRobotInfo")
        .then((res) => {
          console.warn("更新uuid");
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //获取算法评估 巡检任务范围
    getTaskData() {
      this.taskData = [];
      this.taskIdArr = [];
      getTaskList({}).then((res) => {
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            res.data.forEach((item) => {
              this.taskData.push({
                value: item.taskId,
                label: item.taskName,
              });
              this.taskIdArr.push(item.taskId);
            });
            this.checkedTask = this.taskIdArr;
            this.checkAll = true;
          }
        }
      });
    },
    //全选
    handleCheckAllChange(boolen) {
      if (boolen) {
        this.checkedTask = this.taskIdArr;
      } else {
        this.checkedTask = [];
      }
    },
    //导出
    exportData() {
      this.startValue = new Date(this.startTime).getTime();
      this.endValue = new Date(this.endTime).getTime();
      if (!this.startValue || !this.endValue) {
        this.$message.warning(this.$t("时间不能为空"));
        return false;
      }
      if (this.startValue > this.endValue) {
        this.$message.warning(this.$t("开始时间不能大于结束时间"));
        return false;
      }
      if (this.startValue + 518400000 < this.endValue) {
        this.$message.warning(this.$t("时间跨度不能大于七天"));
        return false;
      }
      let arr = [];
      this.checkedTask.map((item) => {
        arr.push(item);
      });
      var params = {
        startTime: this.startTime,
        endTime: this.endTime,
        taskIds: arr,
      };
      this.download(
        `/deploy.viewpoint/exportRecognitionZip?startTime=${this.startTime}&endTime=${this.endTime}&taskIds=${arr}`,
        {},
        `${this.$t("算法评估")}.zip`
      );
    },
  },
};
</script>

<style scoped lang="scss">
.table {
  width: 100%;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 24px;
  box-sizing: border-box;
}
.taskRange {
  width: 389px;
  height: 272px;
  border-radius: 4px;
  border: 1px solid #33414c;
  background-color: #33414c;
  display: inline-block;
  padding: 16px;
  overflow: auto;
}
::v-deep {
  .el-checkbox__label {
    font-size: 14px;
    color: #a6acb1;
    line-height: 14px;
    display: inline-block;
  }
}
</style>
